<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<html>
<head>
    <title>车辆管理</title>
    <meta name="decorator" content="default"/>
    <link href="${ctxStatic}/static_back/css/public.css" type="text/css" rel="stylesheet">
    <link href="${ctxStatic}/static_back/css/main.css" type="text/css" rel="stylesheet">
    <script src="https://webapi.amap.com/maps?v=1.4.9&key=f50df840d14861c95415ec7742d42d86"></script>
</head>

<body>
    <%--标题--%>
    <div class="top-section">
        <h2>车辆管理</h2>
    </div>

    <div class="body-section white-body">
        <%--功能区--%>
        <form:form id="searchForm" modelAttribute="airCar" action="${ctx}/air/airCar/" method="post" >
            <input id="pageNo" name="pageNo" type="hidden" value="${page.pageNo}"/>
            <input id="pageSize" name="pageSize" type="hidden" value="${page.pageSize}"/>
            <div class="function-box">
                <div class="left-function">
                    <form:input path="carNumber" htmlEscape="false" class="function-ipt" placeholder="输入车牌查询" />
                    <form:select path="airRidePoint.id" htmlEscape="false" >
                        <form:option value="" label="全部服务站点"/>
                        <form:options items="${rides}" itemLabel="name" itemValue="id"/>
                    </form:select>
                    <input id="btnSubmit" class="btn btn-main" type="submit" value="查询"/>
                </div>
                <div class="right-function">
                    <shiro:hasPermission name="air:airCar:edit">
                    <a href="${ctx}/air/airCar/form" class="btn btn-blue">新增车辆</a>
                    </shiro:hasPermission>
                </div>
            </div>
        </form:form>
        <sys:message content="${message}"/>

        <%--表格区--%>
        <div class="table-box">
            <table id="contentTable">
                <thead>
                <tr>
                    <th colspan="3" class="td-bb td-rb">基本信息</th>
                    <th colspan="5" class="td-bb td-rb">配置信息</th>
                    <shiro:hasPermission name="air:airCar:edit">
                        <th rowspan="2" width="18%">操作</th>
                    </shiro:hasPermission>
                </tr>
                <tr>
                    <th width="10%">车牌号码</th>
                    <th width="7%">类型</th>
                    <th width="7%" class="td-rb">座位数</th>
                    <%--<th width="7%" class="td-rb">GPS</th>--%>
                    <th width="8%">司机</th>
                    <th width="14%">联系电话</th>
                    <th width="10%">对讲机</th>
                    <th width="15%">服务站点</th>
                    <th width="9%" class="td-rb">状态</th>
                </tr>
                </thead>
                <tbody>
                <c:forEach items="${page.list}" var="airCar">
                    <tr>
                        <td>
                            <a href="javascript:void(0)" class="details" data-id="${airCar.id}">
                                    ${airCar.carNumber}
                            </a>
                        </td>
                        <td>
                                ${airCar.type}
                        </td>
                        <td class="td-rb">
                                ${airCar.seating}
                        </td>
                        <%--<td>--%>
                                <%--${airCar.gps}--%>
                        <%--</td>--%>
                        <td>
                                ${airCar.driver.name}
                        </td>
                        <td>
                                ${airCar.driver.phone}
                        </td>
                        <td>
                                ${airCar.driver.interphone}
                        </td>
                        <td>
                                ${airCar.airRidePoint.name}
                        </td>
                        <td class="td-rb">
                            <c:choose>
                                <c:when test="${airCar.status >0}">${fns:getDictList('air_status').get(airCar.status-1)}</c:when>
                                <c:otherwise>GPS异常</c:otherwise>
                            </c:choose>
                        </td>
                        <td class="td-center">
                            <shiro:hasPermission name="air:airCar:edit">
                                <a href="javascript:void(0)" class="details font-link" data-id="${airCar.id}">详情</a>
                                <a href="javascript:void(0)" class="records font-link" data-id="${airCar.id}">记录</a>
                                <a href="${ctx}/air/airCar/form?id=${airCar.id}" class="font-link">修改</a>
                                <a href="${ctx}/air/airCar/delete?id=${airCar.id}"
                                   onclick="return confirmx('确认要删除该车辆吗？', this.href)" class="font-link">删除</a>
                            </shiro:hasPermission>
                        </td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
            <div class="pagination table-pagination">${page}</div>
        </div>
    </div>

    <%--详情弹窗--%>
    <div id="detailDiv" class="window-layer window-details window-details-2">
        <div class="window-bg"></div>
        <div class="window-main">
            <div class="window-body">

                <%--主要信息--%>
                <div class="details-div">
                    <h3 class="car_number"></h3>
                    <div class="info-box">
                        <ul class="info-list">
                            <li class="info-icon-car" title="类型">
                                <span id="car_type"></span>
                            </li>
                            <li class="info-icon-building" title="所属单位">
                                <span id="car_belong"></span>
                            </li>
                            <li class="info-icon-position" title="车辆定位">
                                <span id="car_position"></span>
                            </li>
                        </ul>
                        <ul class="info-data">
                            <li>
                                <span id="car_seating"></span>个<br/>座位
                            </li>
                            <li>
                                <span id="car_status"></span><br/>状态
                            </li>
                        </ul>
                    </div>

                    <%--todo 车辆偏离，增加样式：map-box-deviate，并给span传文字--%>
                    <%--todo GPS异常，增加样式：map-box-error，并给span传文字--%>
                    <div class="map-box">
                        <div class="map-box-box" id="mapBox">
                        </div>
                        <div class="error-tip">
                            <span>GPS异常！！</span>
                            <%--<span>车辆偏离路线！！</span>--%>
                        </div>
                    </div>

                    <div class="window-bottom">
                        <input type="button" class="btn" value="关闭" onclick="CloseDiv()"/>
                    </div>
                </div>

                <%--附属信息--%>
                <div class="subdetails-div">
                    <div class="info-box">
                        <h4>司机信息</h4>
                        <ul class="info-list">
                            <li class="info-icon-person" title="司机姓名">
                                <span id="car_name"></span>
                            </li>
                            <li class="info-icon-phone" title="司机电话">
                                <span id="car_phone"></span>
                            </li>
                            <li class="info-icon-talk" title="对讲机">
                                <span id="car_interphone"></span>
                            </li>
                        </ul>
                    </div>
                    <div class="info-box">
                        <h4>行程信息</h4>
                        <ul class="info-list">
                            <li class="info-icon-line" title="线路">
                                <span id="car_rp_line"></span>
                            </li>
                            <li class="info-icon-start" title="行程起点">
                                <span id="car_startpointName"></span>
                            </li>
                            <li class="info-icon-end" title="行程终点">
                                <span id="car_tarplace"></span>
                            </li>
                        </ul>
                    </div>
                    <div class="info-box">
                        <h4>服务站点信息</h4>
                        <ul class="info-list">
                            <li class="info-icon-home" title="乘车点">
                                <span id="car_pointName"></span>
                            </li>
                            <li class="info-icon-position" title="乘车点位置">
                                <span id="point_position"></span>
                            </li>
                            <li class="info-icon-person" title="乘车点负责人">
                                <span id="car_leader"></span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <%--详情弹窗--%>
    <div id="record" class="window-layer window-details window-details-2">
        <div class="window-bg"></div>
        <div class="window-main">
            <div class="window-body">

                <%--主要信息--%>
                <div class="details-div">
                    <h3><span class="car_number"></span> 的行车记录</h3>
                    <div class="info-box">
                        <input type="hidden" name="id" id="record_car_id"/>
                        <input id="beginDate" name="beginDate" type="text" readonly="readonly" style="width: 180px;" class="Wdate"
                               value="<fmt:formatDate value="${airDispatchLog.beginDate}" pattern="yyyy-MM-dd HH:mm:ss"/>"
                               onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:false});"/>
                        <span> 至 </span>
                        <input id="endDate" name="endDate" type="text" readonly="readonly" style="width: 180px;margin-right: 10px;" class="Wdate"
                               value="<fmt:formatDate value="${airDispatchLog.endDate}" pattern="yyyy-MM-dd HH:mm:ss"/>"
                               onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:false});"/>
                        <input id="record_search" class="btn btn-main" type="button" value="查询"/>
                    </div>

                    <div id="record_container" class="map-box" style="height: 360px;">
                    </div>

                    <div class="window-bottom">
                        <input type="button" class="btn" value="关闭" onclick="CloseRecordDiv()"/>
                    </div>
                </div>

                <%--附属信息--%>
                <div class="subdetails-div">
                    <div class="info-box" style="margin-bottom: 0">
                        <h4>状态记录</h4>
                        <%--todo 参照这个例子输出数据--%>
                        <%--todo 普通时间  直接用li标签--%>
                        <%--todo 日期时间  li带样式day-time--%>
                        <ul class="info-timeline scroll-box" id="foreach">
                            <li>暂无记录</li>
                            <!--
                            <li class="day-time">
                                2018-11-10
                            </li>
                            <li>
                                <em>07:00</em>
                                香洲客运站 等待发车
                            </li>
                            <li>
                                <em>07:05</em>
                                香洲客运站 已发车
                            </li>-->
                            <%--<c:forEach items="${departures}" var="d">--%>
                                <%--<li>--%>
                                    <%--<fmt:formatDate value="${d.feedbackDate}" pattern="HH:mm:ss"/> ${d.airWorker}--%>
                                    <%--<br>--%>
                                        <%--${d.note}--%>
                                <%--</li>--%>
                            <%--</c:forEach>--%>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <script type="text/javascript">
        $(function () {
            //详情弹窗
            $(".details").click(function () {
                var carId = $(this).data("id");
                $.ajax({
                    url: "${ctx}/air/airCar/getCarMessage",
                    type: "GET",
                    data: {carid: carId},
                    success: function (data) {
                        console.log(data);
                        var car = data.data;
                        var driver = data.data.driver;
                        var point = data.data.airRidePoint;
                        $("#car_type").html(car.type);
                        $(".car_number").html(car.carNumber);
                        $("#car_belong").html(car.belongUnit);
                        $("#car_seating").html(car.seating);
                        $("#car_status").html(getStatusNote(car.status));
                        if(typeof driver !== 'undefined') {
                            $("#car_name").html(driver.name);
                            $("#car_interphone").html(driver.interphone);
                            $("#car_phone").html(driver.phone);
                        }
                        if(typeof point !== 'undefined') {
                            var route = point.route>0?(point.route+"号线"):'';
                            $("#car_rp_line").html(route);
                            $("#car_startpointName").html(point.name);
                            $("#car_consuming").html(point.consumed);
                            $("#car_pointName").html(point.name);
                            $("#car_leader").html(point.leader);
                            $("#point_position").html(point.position);
                            var parking = point.airParkingLot;
                            if(typeof parking !== 'undefined') {
                                $("#car_tarplace").html(parking.name);
                            }
                        }
                        catchCarOffset(car);
                        initMap(car);
                    }
                });
            });

            var carId;
            var track = new Array();
            var polyline = new AMap.Polyline({
                path:null, //设置线覆盖物路径
                strokeColor:"blue", //线颜色
                strokeOpacity:1, //线透明度
                strokeWeight:2, //线宽
                strokeStyle:"solid", //线样式
                strokeDasharray:[10,5] //补充线样式
            });
            var map2 = new AMap.Map('record_container', {
                zoom: 11, //初始化地图层级
                center: [113.58397428, 22.2790923] //初始化地图中心点
            });
            var car_marker = new AMap.Marker({
                position: null,
                title: ''
            });
            polyline.setMap(map2);
            //轨迹弹窗
            $(".records").click(function () {
                carId = $(this).data("id");
                var day_time = {};
                $("#record_car_id").val(carId);
                $.ajax({
                    url: "${ctx}/air/airCar/getCarRecord",
                    type: "GET",
                    async:false,
                    data: {carid: carId},
                    success: function (data) {
                        console.log(data);
                        var records = data.data.recordList;
                        var text = "";
                        $(records).each(function (index, val) {
                            var record_date = val.recordDate.substring(0,10);
                            var record_time = val.recordDate.substring(11);
                            if(!day_time[record_date]){
                                text += '<li class="day-time">'+record_date+'</li>';
                                day_time[record_date] = record_date;
                            }
                            text += "<li><em>"+ record_time +"</em>"+ (val.station?val.station:'') + " " + getStatusNote(val.status) +"</li>";
//                            text += "<li>" + $(val).prop("date") + "<br>" + $(val).prop("fromLocation") + "&nbsp&nbsp&nbsp" + $(val).prop("note") + "</li>"
                        });
                        if (typeof records ==='undefined' || records === null || records === "" || records.length === 0) {
                            text = "<li>暂无记录</li>";
                        }
                        $("#foreach").html(text);

                        var car = data.data.airCar;
                        $(".car_number").html(car.carNumber);

                        track = new Array();
                        var trackList = data.data.trackList;
                        if(trackList){
                            for(var t in trackList){
                                track.push(new AMap.LngLat(trackList[t].lon,trackList[t].lat));
                            }
                        }
                        polyline.setPath(track);
                        if(car.lon&&car.lat){
                            car_marker.setPosition(new AMap.LngLat(car.lon, car.lat));
                            car_marker.setTitle(car.carNumber);
                            car_marker.setMap(map2);
                        }
                    }
                });
                $("#record").css("display", "block");
            });

            //详情搜索
            $("#record_search").bind("click", function () {
                var day_time = {};
                var beginDate = $("#beginDate").val();
                var endDate = $("#endDate").val();
                $.ajax({
                    url: "${ctx}/air/airCar/getCarRecord",
                    type: "GET",
                    data: {carid: carId, beginDate: beginDate, endDate: endDate},
                    success: function (data) {
                        console.log(data);
                        var records = data.data.recordList;
                        var text = "";
                        $(records).each(function (index, val) {
                            var record_date = val.recordDate.substring(0,10);
                            var record_time = val.recordDate.substring(11);
                            if(!day_time[record_date]){
                                text += '<li class="day-time">'+record_date+'</li>';
                                day_time[record_date] = record_date;
                            }
                            text += "<li><em>"+ record_time +"</em>"+ (val.station?val.station:'') + " " + getStatusNote(val.status) +"</li>";
//                            text += "<li>" + $(val).prop("date") + "<br>" + $(val).prop("fromLocation") + "&nbsp&nbsp&nbsp" + $(val).prop("note") + "</li>"
                        });
                        if (typeof records ==='undefined' || records === null || records === "" || records.length === 0) {
                            text = "<li>暂无记录</li>";
                        }
                        $("#foreach").html(text);

                        track = new Array();
                        var trackList = data.data.trackList;
                        if(trackList){
                            for(var t in trackList){
                                track.push(new AMap.LngLat(trackList[t].lon,trackList[t].lat));
                            }
                        }
                        polyline.setPath(track);
                        if(car.lon&&car.lat){
                            car_marker.setPosition(new AMap.LngLat(car.lon, car.lat));
                            car_marker.setTitle(car.carNumber);
                            car_marker.setMap(map2);
                        }
                    }
                });
            });
        });

        var initMap = function (car) {
            if(typeof car.lon !== 'undefined'&&typeof car.lat !=='undefined'){
                var map = new AMap.Map('mapBox', {
                    zoom: 11, //初始化地图层级
                    center: [car.lon, car.lat] //初始化地图中心点
                });
                var maker = new AMap.Marker({
                    position: new AMap.LngLat(car.lon, car.lat),
                    title: car.carNumber
                });
                map.add(maker);
                AMap.plugin('AMap.Geocoder', function() {
                    var geocoder = new AMap.Geocoder({
                        city: '珠海',
                    });
                    var lnglat = [car.lon, car.lat];
                    geocoder.getAddress(lnglat, function(status, result) {
                        if (status === 'complete' && result.info === 'OK') {
                            // result为对应的地理位置详细信息
                            var address = result.regeocode.addressComponent
                            $("#car_position").html(address.city+address.district+address.township+address.street+address.streetNumber);
                        }
                    })
                });
                $("#detailDiv").css("display", "block");
            }else {
                var map = new AMap.Map('mapBox', {
                    zoom: 11, //初始化地图层级
                    center: [113.58397428, 22.2790923] //初始化地图中心点
                });
                $("#car_position").html("未知位置！");
                $("#detailDiv").css("display", "block");
            }
        }
        // 车辆状态
        var statusNote = ['待发车', '已发车', '已到达', '已返程'];
        var getStatusNote = function (status) {
            if (typeof status === 'undefined'||status == null || status == '') {
                return 'GPS异常';
            }
            return statusNote[status - 1];
        }
        var catchCarOffset = function (car) {
            var status = car.status;
            if (typeof status === 'undefined'||status == null || status == '') {
                $("#mapBox").parent().addClass("map-box-error");
                $(".error-tip span").html("GPS异常！！");
            }else if(typeof car.lon !== 'undefined') {
                $("#mapBox").parent().removeClass("map-box-error");
                if (car.isOnline === -1) {
                    $("#mapBox").parent().addClass("map-box-deviate");
                    $(".error-tip span").html("车辆偏离路线！！");
                }
                else {
                    $("#mapBox").parent().removeClass("map-box-deviate");
                    $(".error-tip span").html("");
                }
            }
        };

        function page(n, s) {
            $("#pageNo").val(n);
            $("#pageSize").val(s);
            $("#searchForm").submit();
            return false;
        }

        function CloseDiv() {
            $("#detailDiv").css("display", "none");
        }

        function CloseRecordDiv() {
            $("#record").css("display", "none");
        }
    </script>
</body>
</html>